<template>
  <el-dialog
      title="详情"
      custom-class="x-large-dialog"
      :visible="visible"
      append-to-body
      @open="open"
      @close="close"
  >
    <div class="detail-pannel">
      <el-form v-if="user">
        <div class="group-title">发帖人信息</div>
        <el-row>
          <el-col :span="6" v-if="userInfo">
            <el-form-item label="用户头像：" v-if="userInfo.avatar"><el-image style="width: 60px;height: 60px;" :src="userInfo.avatar"></el-image></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名称：">{{user.userName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户昵称：">{{user.nickName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间:">{{user.createdAt | timeFilter}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="house">
        <div class="group-title">房屋信息</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="房屋标题：">{{house.name}}</el-form-item>
          </el-col>
          <el-col :span="6" v-if="area">
            <el-form-item label="所在地区：">{{area.name}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="租金：">{{house.rent}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form>
        <div class="group-title">论坛内容</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="论坛标题：">{{detailData.title}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发布时间：">{{detailData.createdAt | timeFilter}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：">{{detailData.status | commentStatusFilter}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18" v-if="detailData.pictures">
            <el-form-item label="论坛图片：">
              <el-image v-for="item in detailData.pictures.split('|')" :key="item" :src="item" style="width: 60px;height: 60px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="论坛内容：">{{detailData.content}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _getDetail } from '../src/store'
import { detailDialog } from '@/mixins'

export default {
  name: 'detailDialog',
  mixins: [detailDialog],
  data() {
    return {
      detailData: {},
      detailFunc: _getDetail
    }
  },
  computed: {
    user() {
      return this.detailData?.user
    },
    userInfo() {
      return this.detailData?.user?.userInfo
    },
    house() {
      return this.detailData?.house
    },
    area() {
      return this.detailData?.house?.area
    }
  }
}
</script>

<style scoped>

</style>
